<template>
  <el-tabs type="border-card">
    <el-tab-pane label="商品基本信息">
      <el-form :model="commodity" status-icon label-width="100px" class="demo-ruleForm">

        <el-form-item label="商品分类">
          <div class="block">
            <el-cascader
                v-model="itemList"
                :options="options"
                :props="{
                  expandTrigger: 'click',
                  value: 'id',
                  label: 'name',
                  children: 'children'
                }"
                @change="handleChange"></el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="商品名称">
          <el-input type="text" v-model="commodity.goodsName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="品牌">
          <template>
            <el-select v-model="commodity.brandId" placeholder="请选择">
              <el-option
                  v-for="item in brands"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
              </el-option>
            </el-select>
          </template>
        </el-form-item>

        <el-form-item label="副标题">
          <el-input type="text" v-model="commodity.caption" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="价格">
          <el-input type="text" v-model="commodity.price" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="商品介绍">
          <el-input type="text" v-model="commodity.desc.introduction" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="包装列表">
          <el-input type="text" v-model="commodity.desc.packageList" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="售后服务">
          <el-input type="text" v-model="commodity.desc.saleService" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
    </el-tab-pane>




    <el-tab-pane label="商品图片">
      <el-button plain @click="openDialogVisible">新建</el-button>

      <template>
        <el-table
            :data="commodity.desc.itemImages"
            border
            style="width: 100%">
          <el-table-column
              prop="color"
              label="颜色"
              width="150px">
          </el-table-column>

          <el-table-column
              prop="url"
              label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.url" width="100px" height="100px">
            </template>
          </el-table-column>

          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteTableClick(scope.$index)" type="danger" plain size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
    </el-tab-pane>


<!--模态框-->
    <el-dialog
        title="图片上传"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">

      <el-container>
        <el-aside width="70px">颜色：</el-aside>
        <el-input type="text" v-model="itemImages.color" autocomplete="off"></el-input>
      </el-container>
      <br>
      <el-container>
        <el-aside width="70px">商品图片：</el-aside>
        <el-upload
            class="upload-demo"
            drag
            :headers="headers"
            :on-success="upload"
            action="http://localhost:10010/file/api/file/upload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-container>

  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="additemImages">确 定</el-button>
  </span>
    </el-dialog>






    <el-tab-pane label="扩展属性">
      <template>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
              prop="text"
              label="扩展属性名"
              width="150px">
          </el-table-column>

          <el-table-column
              prop="value"
              label="扩展属性值"
              >
            <template slot-scope="scope">
              <el-input size="small" v-model="scope.row.value" type="text"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </template>

    </el-tab-pane>



    <el-tab-pane label="规格">
      <template>

        <el-table
            :data="desc.specificationItems"
            border
            style="width: 100%">

          <el-table-column
              prop="text"
              label="规格选项名"
              width="150px">
          </el-table-column>

          <el-table-column
              prop="specifications"
              label="规格选项值">

              <template slot-scope="scope">
                <el-checkbox-group v-model="aaa">
                <el-checkbox v-for="item in scope.row.specOption "
                             :label="item.optionName"
                             :key="item.id"
                             @change="aasaa(item,scope.row)"
                             :value="item.optionName"
                             >{{item.optionName}}</el-checkbox>
                </el-checkbox-group>
              </template>

          </el-table-column>

        </el-table>
      </template>

    </el-tab-pane>



    <el-button type="primary" @click="submitForm()">提交</el-button>
  </el-tabs>

</template>

<script>

import index from "vuex";

export default {
  computed: {
    index() {
      return index
    }
  },
  data() {
    return {
      aaa:[],
      bb:[],
      tableData:[],
      specificationItems:[],
      commodity:{
        desc:{
          specificationItems:null,
          itemImages:[],
          customAttributeItems:null,
        },


      },
      itemImages:[{
        url:null,
        color:null,
      }],
      dialogVisible:false,
      itemList:[],
      options:[],
      brands:[],
      IsEnableSpec:null,
      desc:{
        specificationItems:[],
      },
      headers:{
        token:localStorage.getItem("token")
      }
    }
  },
  methods:{
    aasaa:function (value,name){
/*
      [{"attributeName":"网络制式","attributeValue":["移动3G","移动4G"]},{"attributeName":"屏幕尺寸","attributeValue":["6寸","5.5寸"]}]
*/
      let parm=this.specificationItems.find(
          (x)=>x.attributeName===name.text
      )
      if (parm){
       let index= parm.attributeValue.indexOf(value.optionName)
        if (index==-1){
          parm.attributeValue.push(value.optionName)
        }else {
          parm.attributeValue.splice(index,1)
        }
      }else {
        this.specificationItems.push({
          attributeName:name.text,
          attributeValue:[value.optionName]
        })
      }

    },
    queryItem:function (){
      this.$http.get("/system/api/item/queryTree")
          .then(resp=>{
            this.options = resp.data.data;
          }).catch(resp=>{
        this.$message({
          message: "请登录",
          type: 'error'
        });
      })
    },

    deleteTableClick:function (index){
      this.commodity.desc.itemImages.splice(index,1)
    },

    openDialogVisible:function () {
      this.itemImages=[]
      this.dialogVisible=true
    },
    additemImages:function () {
      this.dialogVisible=false;
      this.commodity.desc.itemImages.push({
        url:this.itemImages.url,
        color:this.itemImages.color
      })
    },

    handleChange:function (id) {
      let itemId = id[0];
      this.$http.get("/system/api/temp/queryByItemId/"+itemId)
          .then(resp=>{
              this.brands=JSON.parse(resp.data.data.brandIds);
              this.tableData=JSON.parse(resp.data.data.customAttributeItems)
              this.desc.specificationItems=resp.data.data.specifications

          }).catch(resp=>{
        this.$message({
          message: "请登录",
          type: 'error'
        });
      })
    },



    submitForm:function () {
      let bb=this.commodity.desc.itemImages
      this.commodity.desc.itemImages=JSON.stringify(bb)
      this.commodity.desc.customAttributeItems=JSON.stringify(this.tableData)
      this.commodity.category1Id=this.itemList[0]
      this.commodity.category2Id=this.itemList[1]
      this.commodity.category3Id=this.itemList[2]
      this.commodity.desc.specificationItems=JSON.stringify(this.specificationItems)
      console.debug(this.commodity)
      this.$http.post("/goods/api/goods/insert",this.commodity)
          .then(resp=>{
            this.$message({
              message: "操作成功",
              type: 'success'
            });
            location.reload();
          }).catch(resp=>{
        this.$message({
          message: "请登录",
          type: 'error'
        });
      })
    },



    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

    upload:function (res) {
        this.itemImages.url=res.data;
    }

  },


  mounted() {
    this.queryItem();
  }
}
</script>